<template>
<div class="header-top">
  <input type="text" class="top-input" placeholder="输入内容后回车" v-model="title" @keyup.enter="add">
  </div>
</template>

<script>
import {nanoid} from 'nanoid'
export default {
name:'TodoMyHeader',
data() {
  return {
    title:''
  }
},
methods: {
  add(){
    //校验数据
      if(!this.title.trim()) return alert("输入内容不能为空");
    //将用户的输入包装成为一个todo对象
 const todoO={id:nanoid(),title:this.title,done:false};
 //通知app组件区添加一个todo对象
 this.$emit('addTodo',todoO);
 //清空输入
this.title='';
  }
},
}
</script>

<style scoped>
.header-top{
  height: 35px;
  width: 550px;
}
.top-input{
  height: 35px;
  width: 500px;
  margin-top:15px ;
  margin-left:22px;
  outline:0;
  border:1px solid rgb(167, 162, 162);
}


</style>